﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "设备类型设置";
    Layout = null;
}
<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
<style>
    .layui-table-cell {
        white-space: pre-line;
        word-break: break-all;
        max-width: 300px;
    }
    .layui-form-label {
        width: 110px;
    }
    .layui-input-block {
        margin-left: 140px;
    }
    .layui-layer-content .layui-form-item {
        margin-bottom: 18px;
    }
    .layui-btn-danger {
        background-color: #ff5722;
    }
    .layui-table-view .layui-table-empty {
        color: #999;
        font-size: 16px;
    }
</style>
<div class="layui-card">
    <div class="layui-card-header">
        设备类型设置
        <button type="button" class="layui-btn layui-btn-sm" id="btnAdd">
            <i class="layui-icon">&#xe654;</i> 新增
        </button>
    </div>
    <div class="layui-card-body">
        <table id="equipmentTypeTable" lay-filter="equipmentTypeTable"></table>
    </div>
</div>

<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.$;

    // 渲染表格（分页）
    table.render({
        elem: '#equipmentTypeTable',
        url: '/EquipmentType/GetEquipmentType',
        method: 'GET',
        page: true,
        request: {
            pageName: 'pageIndex', // 页码参数名
            limitName: 'pageSize'  // 每页数量参数名
        },
        limits: [5, 10, 20, 50, 100],
        limit: 10,
        text: {none: '暂无数据'},
        cols: [[
            {field: 'equipmentTypeCode', title: '设备类型编码', minWidth: 120},
            {field: 'equipmentTypeName', title: '设备类型名称', minWidth: 120},
            {field: 'isEnable', title: '是否启用', width: 100, templet: function(d){
                return d.isEnable === '是'
                    ? '<span class="layui-badge layui-bg-green">是</span>'
                    : '<span class="layui-badge layui-bg-gray">否</span>';
            }},
            {field: 'notes', title: '备注', minWidth: 120},
            {title: '操作', width: 180, toolbar: '#tableBar', fixed: 'right'}
        ]]
    });

    // 新增按钮
    $('#btnAdd').on('click', function(){
        layer.open({
            type: 2,
            title: '新增设备类型',
            area: ['500px', '400px'],
            content: '/EquipmentType/EquipmentTypeCreate',
            end: function(){
                table.reload('equipmentTypeTable');
            }
        });
    });

    // 监听工具条
    table.on('tool(equipmentTypeTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            layer.open({
                type: 2,
                title: '编辑设备类型',
                area: ['500px', '400px'],
                content: '/EquipmentType/EquipmentTypeUpdate?id=' + data.id,
                end: function(){
                    table.reload('equipmentTypeTable');
                }
            });
        } else if(obj.event === 'del'){
            layer.confirm('确定删除该设备类型吗？', {icon: 3, title:'提示'}, function(index){
                $.ajax({
                    url: '/EquipmentType/DeleteWorkmanship?equipmentTypeId=' + data.id,
                    type: 'DELETE',
                    success: function(res){
                        if(res > 0){
                            layer.msg('删除成功');
                            obj.del();
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                });
                layer.close(index);
            });
        }
    });
});
</script>
